<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>操纵属性</title>
    <style>
      .tabs {
        display: flex;
      }
      .tab {
        width: 100px;
        height: 50px;
        background-color: white;
        border: 1px black solid;
      }
    </style>
  </head>
  <body>
    <div class="tabs">
      <span class="tab" style="background-color: red"></span>
      <span class="tab"></span>
      <span class="tab"></span>
      <span class="tab"></span>
    </div>
    <script>
      // 获取所有 span
      const spans = document.querySelectorAll(".tab");
      // 挨个绑定点击事件
      spans.forEach((item) => {
        item.addEventListener("click", function () {
          // 所有都变白
          spans.forEach((item) => (item.style.backgroundColor = "white"));
          // console.log(this) // 点谁 谁亮
          this.style.backgroundColor = "red";
        });
      });

      // 输入框 按下回车时并抬起时，获取输入的内容
      const ipt = document.querySelector("input");
      ipt.addEventListener("keyup", function (e) {
        if (e.key == "Enter") {
          // console.log(this)
          console.log(this.value);
          this.value = "改成了其他的值";
        }
      });
    </script>
  </body>
</html>
